<template>
  <el-dialog title="关联家庭成员" v-model="dialogVisible" style="width:450px; height: 500px; padding:10px;" :before-close="handleClose" >
    <el-form label-width="120px" label-position="right" style="padding:40px;">
      <el-form-item>
        <template #label>
          成员名<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入成员名" v-model="familyName"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          年龄<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入年龄" v-model="familyAge"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          性别<span class='red-star'>*</span>
        </template>
        <el-select placeholder="请选择" v-model="familyGender">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template #label>
          关系<span class='red-star'>*</span>
        </template>
        <el-input placeholder="请输入关系" v-model="familyRelation"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="padding:40px;">
        <el-button @click="handleClose" size="large">取消</el-button>
        <el-button type="primary" size="large" @click="addRelation">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-card style="width: 85rem; height: 65rem; margin:2rem auto 0px;">
    <div style="font-size: 20px;color: black; margin-bottom: 20px;">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">完善档案信息</span>
    </div>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>居民信息</span>
    </div>

    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item>
            <template #label>
              姓名<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入姓名" v-model="saveResidentForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              身份证号<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入身份证号" v-model="saveResidentForm.idCardNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              性别<span class='red-star'>*</span>
            </template>
            <el-select placeholder="请选择" v-model="saveResidentForm.gender">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="出生年月">
            <el-date-picker type="date" placeholder="请选择" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveResidentForm.birthDate" style="position: relative;bottom: 8px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              联系电话<span class='red-star'>*</span>
            </template>
            <el-input placeholder="请输入联系电话" v-model="saveResidentForm.phoneNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <template #label>
              标签<span class='red-star'>*</span>
            </template>
            <el-select
                v-model="selectedOptions"
                multiple
                placeholder="请选择"
                @change="handleSelect"
            >
              <div style="padding: 0 20px; line-height:34px">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
              </div>
              <el-checkbox-group v-model="selectedOptions">
                <el-option v-for="item in AllDiseaseOptions" :key="item.value" :label="item.label" :value="item.value">
                  <template #default="scope">
                    <el-checkbox style="pointer-events: none" :label="item.value">
                      {{ item.label }}
                    </el-checkbox>
                  </template>
                </el-option>
              </el-checkbox-group>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="现居地">
            <el-input placeholder="请输入现居地" v-model="saveResidentForm.address" style="width: 670px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="家庭成员">
            <el-card v-for="item in relationship" style="width: 220px; height: 90px; margin-right: 30px; position: relative;cursor: pointer;">
              <img v-if="item.gender==1" src="/img/common/male.png" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
              <img v-else src="/img/common/female.jpg" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
              <div style="width: 100px; height: 50px; color: #999999; margin-left: 15px; display: inline-block; position: relative; bottom: 5px">
                <span style="font-size: 18px; color: black;">{{ item.name }}</span>
                &nbsp;
                <span>{{ item.age }}岁</span>
                <div>
                  <span>关系：</span>
                  <span>{{ item.relation }}</span>
                </div>
              </div>
              <img src="/img/common/tip.png" alt="" style="transform: rotate(-25deg); position: absolute; top: 25px">
            </el-card>
            <el-button link type="primary" @click="dialogVisible = true;" style="margin-left: 20px">+关联家庭成员</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save" size="large">保存</el-button>
      <el-button @click="router.push('/resident')" size="large">返回</el-button>
    </template>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const AllDiseaseOptions = ref([]);
const selectedOptions = ref([]);
const checkAll = ref(false); // 是否全选
const isIndeterminate = ref(false); //全选复选框标识
const handleSelect = (values) => {
  const checkedCount = values.length;
  checkAll.value = checkedCount === AllDiseaseOptions.value.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < AllDiseaseOptions.value.length;
};
const handleCheckAllChange = (val) => {
  const data = AllDiseaseOptions.value.map(item => {
    return item.value
  })
  selectedOptions.value = val ? data : [];
  isIndeterminate.value = false;
};


let residentId = '';
const saveResidentForm = ref({id:'', name:'', idcard:'', gender:'', birthDate:'', phone:'', address:''});
const relationship = ref([]);

onMounted(() => {
  axios.get(BASE_URL + '/hhmc/disease/list/').then((response) => {
    if (response.data.code == 2000) {
      const AllOptions = response.data.data;
      for (let i = 0; i < AllOptions.length; i++) {
        const adp = ref({value : AllOptions[i].id, label : AllOptions[i].name});
        AllDiseaseOptions.value.push(adp.value);
      }
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  residentId = new URLSearchParams(window.location.search).get('id');
  if (residentId) {
    axios.get(BASE_URL + '/hhmc/patient/select/'+residentId).then((response) => {
      if (response.data.code == 2000) {
        saveResidentForm.value = response.data.data;
      } else {
        ElMessage.error(response.data.msg);
      }
    })

    getFamilyInfo(residentId);

    axios.get(BASE_URL + '/hhmc/patient/select/' + residentId).then((response) => {
      if (response.data.code == 2000) {
        selectedOptions.value = response.data.data.diseaseIds;
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
});

const getFamilyInfo = (id)=>{
  axios.get(BASE_URL + '/hhmc/patient/getFamilyInfo/'+ id).then((response) => {
    if (response.data.code == 2000) {
      relationship.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const save = ()=>{
  saveResidentForm.value.id = residentId;
  let data = qs.stringify(saveResidentForm.value);
  axios.post(BASE_URL+'/hhmc/patient/update', data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('保存成功！')
    }else{
      ElMessage.error('保存失败');
    }
  })
  router.push('/resident')
}

const dialogVisible = ref(false);
const handleClose = ()=>{
  dialogVisible.value = false;
  familyName.value = '';
  familyAge.value = '';
  familyGender.value = '';
  familyRelation.value = '';
}
const addFamilyMember = ref({});
const familyName = ref('');
const familyAge = ref('');
const familyGender = ref('');
const familyRelation = ref('');
const addRelation = ()=>{
  if (familyName.value == '' || familyAge.value == '' || familyGender.value == '' || familyRelation.value == '') {
    ElMessage.error('请填写完整！');
    return;
  }
  addFamilyMember.value = {};
  addFamilyMember.value.patientId = residentId;
  addFamilyMember.value.name = familyName.value;
  addFamilyMember.value.age = familyAge.value;
  addFamilyMember.value.gender = familyGender.value;
  addFamilyMember.value.relation = familyRelation.value;
  let data = qs.stringify(addFamilyMember.value);
  axios.post(BASE_URL+'/hhmc/patient/addFamilyMember', data).then((response)=>{
    console.log(response.data);
    if(response.data.code == 2000){
      ElMessage.success('添加成功！');
      setTimeout(() => {
        getFamilyInfo(residentId);
      }, 1000);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
  handleClose();
}
</script>

<style scoped>
hr {
  background-color: rgb(242,247,251);
  height:1px;
  border:none;
  margin-bottom: 20px
}

:deep(.el-select) {
  width: 220px;
  .el-select__wrapper {
    height: 45px;
  }
  /*
  .el-select__selection.is-near::after {
    content: '请选择';
    line-height: 45px;
    color: rgb(176, 171, 185);
    font-size: 14px;
    margin-left: 8px;
    margin-top: 1px;
  }
  .el-select__selection.is-near .el-select__selected-item {
    display: none;
  }
  */
}
:global(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
  background-color: white !important;
}

:deep(.el-form-item__label) {
  height: 45px;
  line-height: 45px;
  color: #999999;
  font-size: 15px;
}

.el-button {
  width: 70px;
  height: 45px;
  font-size: 15px;
}

:deep(.el-input) {
  width: 220px;
  .el-input__wrapper {
    height: 45px;
  }
  .el-input__inner{
    border:0;
    height: 45px;
  }
  .el-input__icon{
    height: 45px;
    font-size: 18px;
  }
}

.red-star {
  color: red;
  font-size: 16px;
  font-weight: 300;
  margin-left: 1px;
}
</style>